<template>
    <div>
        <navigation></navigation>
        <div class="personalCenter">
            <!-- 头像 -->
            <el-row class="demo-avatar demo-basic" style="background-image: linear-gradient(#dff5d6 90%, #98e778 100%);padding:50px 0">
                <el-col :lg="{span:4,offset:4}" :md="{span:4}">
                    <el-avatar :size="100" src="https://avatars0.githubusercontent.com/u/47131504?s=64&v=4"></el-avatar>
                </el-col>
                <el-col :lg="{span:7,pull:2}" :md="{span:10,offset:3}" style="marginTop:20px" v-show="!showChange">
                    <div class="demo-basic--circle" >
                            <span @click="chooce(index)" v-for="(item,index) in iamgeChoice" :key="index"><el-avatar :size="50" :src="item.image" style="margin:0 10px" ></el-avatar></span>
                    </div>
                </el-col>
                <!-- 个人信息内容展示 -->
                <el-col :lg="{span:20,offset:4}" :md="{span:24}" v-if="showChange">
                    <el-divider></el-divider>
                    <span @click="change" v-if="showChange" style="color:rgb(77, 195, 48);float:right;paddingRight:200px;fontWeight:600">修改信息</span>
                    <el-form ref="form" :model="form" label-width="80px" style="maxWidth:800px">
                        <div class="info">
                            <!-- <span>ID:</span><span v-text="this.$store.state.id"></span><br><br>
                            <span>昵称:</span><span v-text="form.name"></span><br><br>
                            <span>邮箱:</span><span v-text="form.email"></span><br><br>
                            <span>姓名:</span><span v-text="form.realname"></span><br><br>
                            <span>简介:</span><span v-text="form.user_description"></span> -->
                            <span>ID:</span><span v-text="94453285"></span><br><br>
                            <span>昵称:</span><span>冬瓜西皮</span><br><br>
                            <span>邮箱:</span><span>16683483@qq.com</span><br><br>
                            <span>姓名:</span><span>张三</span><br><br>
                            <span>动态数量：54 &nbsp;</span>
                            <span>文章数量：7 &nbsp;</span>
                            <span>提问数量：32  </span><br>
                            <span>问答数量：45&nbsp;&nbsp;</span>
                            <span>互动数量：120</span>

                        </div><br>
                    </el-form>
                </el-col>
                <!-- 信息修改 -->
                <el-col v-else  :lg="{span:20,offset:4}" :md="{span:24}">
                    <el-divider></el-divider>
                    <el-form ref="form" :model="form" label-width="80px" style="maxWidth:800px">
                        <div class="info">
                            <!-- <span>ID:</span><span v-text="this.$store.state.id">{{}}</span><br><br>
                            <span>昵称:</span><span v-text="form.name"></span><br><br>
                            <span>邮箱:</span><span v-text="form.email"></span><br><br> -->
                            <span>ID:&nbsp;</span><el-input v-model="form.realname" :placeholder="this.$store.state.real_name" style="maxWidth:400px"></el-input><br><br>
                            <span>昵称:</span><el-input v-model="form.realname" :placeholder="this.$store.state.real_name" style="maxWidth:400px"></el-input><br><br>
                            <span>邮箱:</span><el-input v-model="form.realname" :placeholder="this.$store.state.real_name" style="maxWidth:400px"></el-input><br><br>
                            <!-- <span>姓名:</span><span>张三</span><br><br> -->
                            <span>姓名:</span><el-input v-model="form.realname" :placeholder="this.$store.state.real_name" style="maxWidth:400px"></el-input><br><br>
                            <span style="verticalAlign: top;">简介:</span>
                            
                            <br>
                            <el-input
                            type="textarea"
                            :placeholder="this.$store.state.user_description"
                            v-model="form.user_description"
                            maxlength="30"
                            resize=none
                            rows=11
                            style="maxWidth:400px"
                            show-word-limit
                            >
                            </el-input>
                        </div><br>
                    </el-form>
                    <!-- <el-button :plain="true" @click="change();open2()">保存修改</el-button> -->
                    <el-button plain>保存</el-button>
                </el-col>
            </el-row>
        </div>
        <footers></footers>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    name:'personalCenter',
    data() {
        return {
            circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            form: {
                id: '',
                realname:'',
                name: '',
                avtar: '',
                user_description:'',
                avatar:'',
                email: ''
            },
            showImg:false,
            name:'',
            imageUrl: '',
            showChange:true,
            iamgeChoice:[
                {image:'https://himg.bdimg.com/sys/portrait/item/cdccc866c1a8ccf4d2bc345a.jpg'},
                {image:'https://c-ssl.duitang.com/uploads/item/201709/26/20170926003219_RCjJE.thumb.700_0.jpeg'},
                {image:'https://c-ssl.duitang.com/uploads/item/201412/09/20141209183953_uiree.thumb.1900_0.jpeg'},
                {image:'https://c-ssl.duitang.com/uploads/item/201509/25/20150925110828_iMnGx.thumb.700_0.jpeg'},
                {image:'https://c-ssl.duitang.com/uploads/item/201802/21/20180221223815_xkkyq.thumb.700_0.jpg'},
                {image:'https://avatars0.githubusercontent.com/u/47131504?s=64&v=4'}
            ],

        }
    },
    beforeMount(){
        this.hasToken();
        this.showImg=this.$store.state.show;
        var aid=this.$route.params.aid;
    },
    methods: {
        change(){
            this.showChange=!this.showChange;
            
        },
        chooce(item){
            this.form.avatar=this.iamgeChoice[item].image;
        },
        hasToken(){
            if(localStorage.getItem("token")!=null){
                this.getuserIn();
            }else{
                this.$router.replace("/login");
            }
        },
        getuserIn(){
            axios.get("http://127.0.0.1:8000/api/UserViewSet/",{
            params: {
                uid:localStorage.getItem("id")
            }
            })
            .then((res)=>{
                console.log("211e");
                console.log(res);
                this.$store.commit("madeShow",true);
                this.$store.commit("changeName",res.data.results[0].username);
                this.$store.commit("changeId",res.data.results[0].uid);
                this.$store.commit("changeAvatar",res.data.results[0].avatar);
                this.$store.commit("changeuser_description",res.data.results[0].user_description);
                this.$store.commit("getEmail",res.data.results[0].e_mail);
                this.$store.commit("changerealname",res.data.results[0].real_name);
            })
            .catch(function(error){
                //console.log("error");
            }).then(()=>{
                //console.log(this.$store);
                this.form.id="xxx";
                this.form.name="xxx";
                this.form.email="xxx";
                this.form.realname="xxx";
                this.form.avatar="xxx";
                this.form.user_description=this.$store.state.user_description;

                this.showImg=true;
            })
        },
        // 修改用户信息
        open2() {
            console.log(this.form.name+" "+this.form.email);
            axios.put("http://127.0.0.1:8000/api/UserViewSet/"+localStorage.getItem("id")+"/",{
                data: {
                    "username":this.form.name,
                    "uid":localStorage.getItem("id"),
                    "e_mail":this.form.email,
                    "real_name": this.form.realname,
                    "avatar": this.form.avatar,
                    "user_description":this.form.user_description,
                }
            })
            .then((res)=>{
                console.log("修改后的返回值");
                var obody=eval('('+res.config.data+')');
                console.log(obody);
                obody=obody.data;
                this.$store.commit("madeShow",true);
                this.$store.commit("changeName",obody.username);
                this.$store.commit("changeAvatar",obody.avatar);
                this.$store.commit("changeuser_description",obody.user_description);
                this.$store.commit("getEmail",obody.e_mail);
                this.$store.commit("changerealname",obody.real_name);
                this.$message({
                    message: '保存成功',
                    type: 'success'
                });
            })
            .catch(function(error){
                // console.log(error);
            }).then(()=>{
                //console.log(this.$store);
                this.form.id=this.$store.state.id;
                this.form.name=this.$store.state.name;
                this.form.email=this.$store.state.e_mail;
                this.form.avatar=this.$store.state.avatar;
                this.form.user_description=this.$store.state.user_description;
                this.showImg=true;
            })
            //console.log(this.form);
            this.showImg=true;
        },
    }
}
</script>
<style scoped>
@media (min-width:1200px){
    .personalCenter{
        margin-left: 20%;
        margin-right: 20%;
        background-color: #ffffff;
        width: 60%;
    }
}
@media (min-width:1200px){
    .personalCenter{
        background-color: #ffffff;
        width: 60%;
    }
}
@media (min-width:1200px){
    .el-form-item{
        width:500px;
    }
}
.info span{
    line-height: 60px;
    font-size: 25px;
}
p{
    font-size: 20px;
    margin-left: calc(30% - 40px);
    height: 40px;
    line-height: 40px; 
    }
.el-form-item__label{
    color: #98e778;
    font-size: 20px;
}
span{
    font-size: 20px;
}
.el-button{
    background-color: #ffffff;
    margin-left: calc(30% - 50px);
}
.demo-basic--circle{
    margin-top: 20px;
    margin-bottom: 20px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #d9d9d9;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    background-color: #fff;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}
.avatar {
    width: 100px;
    height: 100px;
    display: block;
}
.el-input__inner{
    border-radius:5px 5px 5px 5px;
}
.el-form-item__label{
    font-size: 14px;
}
</style>